<template>
	<view class="pages">
		<view class="main">
			<view class="info_item u-flex u-flex-between" v-for="(item,index) in integral_list" :key="index">
				<view class="u-flex-column info_item_left">
					<text>{{item.title}}</text>
					<text>{{item.createdAt}}</text>
				</view>
				<text :class="item.type==1?'num':'num1'">{{item.type==1?'+':'-'}}{{item.integral}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		user_getIntegralDetail
	} from '@/common/api.js';
	export default {
		data() {
			return {
				integral_list: [],
				page: 1,
				perPage: 10,
				count: 0
			}
		},
		onReachBottom() {
			// alert('下啦')

			this.get_IntegralDetail()

		},
		onLoad() {
			try {
				if (uni.getStorageSync('access_token')) {
					// this.is_login = true

					this.init()
					// this.getMember_List()
					// this.get_UserInfo()
				} else {
					uni.navigateTo({
						url: '/pages/guide/index'
					})
					// this.is_login = false
				}
			} catch (e) {
				//TODO handle the exception
			}


		},
		methods: {
			init() {
				this.page = 1
				// this.proData=[]
				this.count = 0
				setTimeout(() => {
					this.get_IntegralDetail()
				}, 300)
			},
			get_IntegralDetail() {
				let data = {
					params: {
						page: this.page,
						perPage: this.perPage
					}
				}

				user_getIntegralDetail(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.integral_list = [...this.integral_list, ...result.list]
					this.count = result.count
					// result.list.length <= 0 ? this.status = 'noMore' : this.status = 'more'
					this.page++;
				}).catch((err) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding: 20rpx;
		box-sizing: border-box;

		.main {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			.info_item {
				height: 140rpx;
				align-items: center;
				border-bottom: 1rpx solid #EEEEEE;

				&:last-child {
					border-bottom: 1rpx solid #fff;
				}

				.info_item_left {
					text {
						&:first-child {
							font-size: 32rpx;
							color: #000000;
							margin-bottom: 23rpx;
						}

						&:last-child {
							font-size: 28rpx;
							color: #A8A8A8;
						}
					}
				}

				.num {
					color: #FF6C00;
					font-weight: bold;
					font-size: 36rpx;
				}

				.num1 {
					color: #B0B0B0;
					font-weight: bold;
					font-size: 36rpx;
				}
			}
		}
	}
</style>
